<template>
  <div class="dashboard-container">
    <el-carousel :interval="4000" type="card" height="250px">
      <el-carousel-item v-for="item in imgList" :key="item.name">
        <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title" />
      </el-carousel-item>
    </el-carousel>

    <el-divider></el-divider>

    <div>
      <el-calendar v-model="date">
        <template slot="dateCell" slot-scope="{date, data}">
          <div :class="{ selected : isSelected(date, data) }">
            <div class="solar">{{ data.day.split('-')[2] }}</div>
            <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
          </div>
        </template>
      </el-calendar>

    </div>
  </div>
</template>

<script>
import calendar from '@/utils/calendar.js'
  export default {
    name: 'Dashboard',
    data(){
      return{
        imgList:[
          {
            name: "1",
            src: require("@/assets/image/1.jpeg"),
            title: "这是1.jpeg"
          },
          {
            name: "2",
            src: require("@/assets/image/2.jpeg"),
            title: "这是2.jpeg"
          },
          {
            name: "3",
            src: require("@/assets/image/3.jpeg"),
            title: "这是3.jpeg"
          },
          {
            name: "4",
            src: require("@/assets/image/4.jpeg"),
            title: "这是4.jpeg"
          },
          {
            name: "5",
            src: require("@/assets/image/5.jpeg"),
            title: "这是5.jpeg"
          },
          {
            name: "6",
            src: require("@/assets/image/6.jpeg"),
            title: "这是6.jpeg"
          }
        ],
        date: new Date(),
        // 根据selectedDates设置选中日期
        selectedDates: ['2020-04-12','2020-04-15','2020-04-24']
      }
    },
    methods:{
      // // 农历显示
      // solarDate2lunar(solarDate) {
      //   var solar = solarDate.split('-')
      //   var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
      //   // return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn
      //   return solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn
      // }

      // 是否选中日期
      isSelected : function(slotDate, slotData) {
        return this.selectedDates.includes(slotData.day)
      },
      // 是否节假日
      isFestival(slotDate, slotData) {
        let solarDayArr = slotData.day.split('-');
        let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

        // 公历节日\农历节日\农历节气
        let festAndTerm = [];
        festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
        festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
        festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
        festAndTerm = festAndTerm.join('')

        return festAndTerm != ''
      },
      // 公历转农历
      solarToLunar(slotDate, slotData) {
        let solarDayArr = slotData.day.split('-');
        let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

        // 农历日期
        let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

        // 公历节日\农历节日\农历节气
        let festAndTerm = [];
        festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
        festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
        festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
        festAndTerm = festAndTerm.join('')

        return festAndTerm == '' ? lunarMD : festAndTerm
      }
    }
  }
</script>

<style scoped>
  /**隐藏上一月、本月、下一月*/
  .el-calendar__button-group {
    display: none;
  }
  /**月份居中*/
  .el-calendar__title {
    width: 100%;
    text-align: center;
  }
  /**日期div的样式*/
  .el-calendar-table tr td:first-child {
    border-left: 0px;
  }
  .el-calendar-table td {
    min-height: 110px;
    min-width: 110px;
    border-right: 0px;
  }
  .el-calendar-table td.is-selected {
    background-color: white;
  }
  .el-calendar-table .el-calendar-day {
    height: 100%;
    padding: 0px;
    text-align: center;
  }
  .el-calendar-table .el-calendar-day > div {
    height: 104px;
    text-align: center
  }
  /**日期div的样式-公历*/
  .el-calendar-table .el-calendar-day > div .solar {
    padding-top: 30px;
    text-align: center
  }
  /**日期div的样式-农历*/
  .el-calendar-table .el-calendar-day > div .lunar {
    padding-top: 10px;
    text-align: center
  }
  /**日期div的样式-选中*/
  .el-calendar-table .el-calendar-day > div.selected {
    background-color: #fef2f2;
    border: 3px solid #fb0;
    border-radius: 20px;
    text-align: center
  }

  /**本月周末设置为红色*/
  .el-calendar-table .current:nth-last-child(-n+2) .solar {
    color: red;
  }
  /**本月农历设置为灰色*/
  .el-calendar-table .current .lunar {
    color: #606266;
  }
  /**本月农历节日设置为红色*/
  .el-calendar-table .current .lunar.festival {
    color: red;
  }
  /**禁用点击效果*/
  /*.el-calendar-table td {*/
  /*pointer-events: none;*/
  /*}*/
</style>

